<template>
    <div>
        <Tripline 
        :value="newLine" :tripTitle="tripTitle"
        :empty="empty" :isShow="isShow"
        ></Tripline>
    </div>
   
</template>

<script>
import Tripline from '../components/Tripline'

import {mapState} from "vuex";
export default {
    data:function(){
        return{
            tripTitle:"新品路线",
            isShow:false,
        }
    },
    components:{
        Tripline,
    },
    mounted:function(){
        this.$store.commit("changNewPage")
        this.$store.dispatch("requestNewLine");

        var content=document.getElementById("content");
        content.onscroll=(e)=>{
            if(e.target.scrollTop>=e.target.scrollTopMax){
                this.isShow=true;
                setTimeout(function() {
                    this.$store.dispatch("requestMoreNewLine")
                    .then(data=>{
                        this.isShow=false;
                    })
                }.bind(this),700);
                
            }else{
                this.$store.commit("changeEmpty");
            }
        }
    },
    computed:{
        ...mapState([
            "newLine","empty"
        ])
    }
}
</script>

<style lang='css' scoped>

</style>